<template>
    <div class="how-work" :class="{ active: true ,'un-animation':un_animation}">
        <div class="how-work-banner">
            <h2>How it works</h2>
            <p>We are here to help make your business bloom!</p>
        </div>
        <h2 class="how-work-title">
            <strong>5&nbsp;</strong>Easy Steps to Selling the Clothes Designed by You
        </h2>
        <div class="how-work-tab" :style="getTabOpacity(opacity1)">
            <div class="how-work-tab-media" id="animation-1">
                <div class="how-work-tab-pick"></div>
            </div>

            <article>
                <h3><strong>1</strong><span>Choose a Product</span></h3>
                <p>
                    We take pride in our consistent, unmatched quality and
                    expertise in the fashion industry.
                    <nuxt-link to="/product">Our catalog</nuxt-link> showcases a
                    variety of unique, trendy, and well-tailored apparel made of
                    100% premium cotton fabric. Pick the items that match your
                    brand vision and get a head start on your business.
                </p>
            </article>
        </div>
        <div class="how-work-tab" :style="getTabOpacity(opacity2)">
            <div class="how-work-tab-media" id="animation-2">
                <div class="how-work-tab-pick"></div>
            </div>

            <article>
                <h3><strong>2</strong><span>Create Your Own Design</span></h3>
                <p>
                    Add your designs to a maximum of 18 print areas (a single area can measure up to 16” x 21”) on a garment. Our genius Design Creator allows you to go creative with colors & graphics and fulfill your wild ideas in every possible way. Order a sample to see how we turn your fantasies into reality.
                </p>
            </article>
        </div>
        <div class="how-work-tab" :style="getTabOpacity(opacity3)">
            <div class="how-work-tab-media" :class="{ active: section3 }" id="animation-3">
                <div class="how-work-tab-media-computer">
                    <cite>
                        <dl>
                            <dt>progress bar</dt>
                            <dd sort="1">
                                <i class="iconfont icon-gougou"></i>
                            </dd>
                            <dd sort="2">
                                <i class="iconfont icon-gougou"></i>
                            </dd>
                            <dd sort="3">
                                <i class="iconfont icon-gougou"></i>
                            </dd>
                        </dl>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/how-work-3-1.png" alt="" />
                        </figure>
                        <strong></strong>
                    </cite>
                    <cite>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/how-work-3-2.png" alt="" />
                            <img src="https://img.podpartner.com/static/images-20230202/how-work-3-3.png" alt="" />
                            <img src="https://img.podpartner.com/static/images-20230202/how-work-3-4.png" alt="" />
                        </figure>
                    </cite>
                </div>
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/mouse.png" alt="" />
                </figure>
            </div>
            <article>
                <h3>
                    <strong>3</strong><span>Publish It to Your Store </span>
                </h3>
                <p>
                    It only takes a few clicks to connect your PODpartner
                    account to multiple E-commerce platforms (e.g.,
                    <a target="_blank" href="https://apps.shopify.com/podpartner">Shopify</a>
                    &
                    <nuxt-link to="/document/etsy-description">Etsy</nuxt-link>)
                    and sync the designed items to your online store with
                    ready-to-use product details and images. If you need additional
                    model photos to maximize your clothing's visual appeal, our
                    design team is happy to help out.
                </p>
            </article>
        </div>
        <div class="how-work-tab" :style="getTabOpacity(opacity4)">
            <div class="how-work-tab-media" :class="{ active: section4 }" id="animation-4">
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/how-work-4-1.png" alt="" />
                    <img src="https://img.podpartner.com/static/images-20230202/mouse.png" alt="" />
                </figure>
                <figure>
                    <img src="@/assets/images/logo.png" alt="" />
                </figure>
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/how-work-4-2.png" alt="" />
                </figure>
                <dl>
                    <dt></dt>
                    <dd>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/how-work-4-2.png" alt="" />
                        </figure>
                        <cite>skeleton</cite>
                        <i class="iconfont icon-Completed"></i>
                    </dd>
                    <dd>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/how-work-4-2.png" alt="" />
                        </figure>
                        <cite>skeleton</cite>
                        <i class="iconfont icon-Completed"></i>
                    </dd>
                    <dd>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/how-work-4-2.png" alt="" />
                        </figure>
                        <cite>skeleton</cite>
                        <i class="iconfont icon-Completed"></i>
                    </dd>
                    <dd>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/how-work-4-2.png" alt="" />
                        </figure>
                        <cite>skeleton</cite>
                        <i class="iconfont icon-Completed"></i>
                    </dd>
                    <dd>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/how-work-4-2.png" alt="" />
                        </figure>
                        <cite>skeleton</cite>
                        <i class="iconfont icon-Completed"></i>
                    </dd>
                </dl>
            </div>
            <article>
                <h3><strong>4</strong><span>Order Processing</span></h3>
                <p>
                    Once you make a sale at your online store, the order will be
                    automatically imported to us. Our powerful and stable system
                    has the capacity to handle a large number of orders
                    efficiently and accurately. We can even customize your bulk
                    order process by offering technical solutions tailored to
                    your needs.
                </p>
            </article>
        </div>
        <div class="how-work-tab" :style="getTabOpacity(opacity5, 'bottom')">
            <div class="how-work-tab-media" :class="{ active: section5 }" id="animation-5">
                <cite>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/how-work-5-1.png" alt="" />
                    </figure>
                    <i class="iconfont icon-gougou"></i>
                </cite>
                <cite>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/how-work-5-2.png" alt="" />
                    </figure>
                    <i class="iconfont icon-gougou"></i>
                </cite>
                <cite>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/how-work-5-3.png" alt="" />
                    </figure>
                    <i class="iconfont icon-gougou"></i>
                </cite>
                <figure>
                    <img src="https://img.podpartner.com/static/images-20230202/how-work-5-aircraft.png" alt="" />
                </figure>
            </div>

            <article>
                <h3><strong>5</strong><span>We Do the Rest </span></h3>
                <p>
                    Now you can relax and let us take it from here. Our in-house
                    factory can fulfill 98% of the orders within 48 hours. All
                    products will be rigorously inspected, carefully packed, and
                    safely shipped to your customers
                    with real-time tracking. We believe our end products will
                    wow your customers and help your business flourish.
                </p>
            </article>
        </div>
        <div class="how-work-next">
            <h2>Only Creativity, Satisfaction, and Profits!</h2>
            <cite>
                <p>No Order Minimums</p>
                <p>No Sale, No Charge</p>
            </cite>
            <cite>
                <p>No Unsold Stock</p>
                <p>No Quality Concerns</p>
            </cite>
            <button type="primary" @click="buttonClick">Get started</button>
        </div>
    </div>
</template>
<script>
import * as spritejs from "spritejs";
import { mapGetters } from "vuex";
import { HOWWORK } from "@/utils/SeoConfig"
const { Scene, Sprite, Label, Group } = spritejs;
export default {
    name: "HowToWork",
    head ({ $store }) {
        return {
            title: HOWWORK.title,
            meta: [
                { name: "keywords", content: HOWWORK.keywords },
                { name: "description", content: HOWWORK.description },
            ],
        };
    },
    data () {
        return {
            section1: false,
            section2: false,
            section3: false,
            section4: false,
            section5: false,
            opacity1: -440,
            opacity2: -440,
            opacity3: -440,
            opacity4: -440,
            opacity5: -440,
            spriteData1: null,
            spriteData2: null,
            screenHeight: null,
            // ScrollReveal: ScrollReveal,
            un_animation: false
        };
    },
    computed: {
        ...mapGetters({
            isLogin: "getIsLogin",
        }),
    },
    methods: {
        buttonClick () {
            if (this.isLogin) {
                this.$router.push("/user");
            } else {
                this.$emit("global:userLogin", () => {
                    this.$router.push("/user");
                });
            }
        },
        onScroll (event) {
            let scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop;
            let height = (this.screenHeight / 2) + 220;
            let limit = [height, height + 660, height + (660 * 2), height + (660 * 3), height + (660 * 4)]; // 560 - 100
            if (!this.un_animation) {
                limit.map((item, index) => {
                    let str = "opacity" + (index + 1);
                    let num = scrollTop - item;
                    this[str] = num;
                });
            }
            if (scrollTop > limit[4] - 220) {
                // 2650
                this.section5 = true;
                return;
            }
            if (scrollTop > limit[3] - 220) {
                // 2100
                this.section4 = true;
                return;
            }
            if (scrollTop > limit[2] - 220) {
                // 1370
                this.section3 = true;
                return;
            }
            if (scrollTop > limit[1] - 220) {
                // 1080
                this.sprite2();
                return;
            }
            if (scrollTop > limit[0] - 220) {
                this.sprite1();
                return;
            }
        },
        getTabOpacity (item, type) {
            let num = 0;
            let height = 660;
            if (type == "bottom") {
                if (item > -height && item < 0) {
                    num = 1 - (Math.abs(item) / height).toFixed(2);
                } else if (item >= 0) {
                    num = 1;
                }
            } else {
                if (item > -height && item <= height) {
                    num = 1 - (Math.abs(item) / height).toFixed(2);
                }
            }

            let scale = 0.3 + num * 0.9;
            scale > 1 ? (scale = 1) : scale;
            let opacity = (scale - 0.3) / 0.7;
            opacity > 1 ? (opacity = 1) : opacity;

            return `opacity:${opacity};transform: scale(${scale});`;
        },
        sprite1 () {
            if (this.section1) return;
            let {
                tab,
                mouse,
                clothe1,
                bgBox,
                btnBg,
                btnBgHover,
                btnG,
                btnGHover,
            } = this.spriteData1;
            this.section1 = true;
            let imgNum = 0;
            const createAnimation = async () => {
                if (imgNum < 3) {
                    imgNum++;
                } else {
                    imgNum = 1;
                }
                tab.attr({
                    anchor: [0.5, 0.5],
                    pos: [560, 220],
                    // pos: [220, 220],居中
                });
                mouse.attr({
                    texture: "https://img.podpartner.com/static/images-20230202/mouse.png",
                    anchor: [0.5, 0.5],
                    pos: [330, 410],
                    size: [28, 29],
                    opacity: 0,
                });

                clothe1.attr({
                    texture: "https://img.podpartner.com/static/images-20230202/how-work-1-" + imgNum + ".png",
                    anchor: [0.5, 0.5],
                    pos: [0, -30],
                    size: [180, 172],
                });
                bgBox.attr({
                    anchor: [0.5, 0.5],
                    size: [240, 320],
                    pos: [0, 0],
                    bgcolor: "#fff",
                });
                btnBg.attr({
                    anchor: [0.5, 0.5],
                    size: [196, 32],
                    pos: [0, 120],
                    bgcolor: "#F6F6F6",
                    borderRadius: 4,
                });
                btnBgHover.attr({
                    anchor: [0.5, 0.5],
                    size: [24, 24],
                    pos: [0, 120],
                    bgcolor: "#23B98F",
                    borderRadius: 12,
                    opacity: 0,
                });
                btnG.attr({
                    texture: "https://img.podpartner.com/static/images-20230202/how-work-dui.png",
                    anchor: [0.5, 0.5],
                    pos: [0, 120],
                    size: [14, 14],
                });
                btnGHover.attr({
                    texture: "https://img.podpartner.com/static/images-20230202/how-work-dui-active.png",
                    anchor: [0.5, 0.5],
                    pos: [0, 120],
                    size: [14, 14],
                    opacity: 0,
                });

                //动画开始

                await tab.transition(1.2).attr({
                    pos: [220, 220],
                });
                if (imgNum == 3) {
                    await mouse.transition(0.1).attr({
                        opacity: 1,
                    });
                    await mouse.transition(0.6).attr({
                        pos: [230, 360],
                    });
                    btnGHover.transition(0.3).attr({});
                    btnGHover.transition(1).attr({
                        opacity: 1,
                    });
                    await btnBgHover.transition(0.5).attr({
                        opacity: 1,
                    });
                    await btnBgHover.transition(0.5).attr({});
                    await btnBgHover.transition(0.2).attr({
                        size: [32, 32],
                        borderRadius: 8,
                    });

                    await btnBgHover.transition(0.5).attr({
                        size: [196, 32],
                        borderRadius: 4,
                    });
                    await mouse.transition(0.1).attr({
                        opacity: 0,
                    });
                }
                await tab.transition(0.8).attr({});
                if (imgNum < 3) {
                    await tab.transition(1.2).attr({
                        pos: [-120, 220],
                    });
                    createAnimation();
                }
            }
            createAnimation();
        },
        sprite2 () {
            if (this.section2) return;
            this.section2 = true;
            let {
                right_active,
                modelBox,
                base_img,
                print1,
                print2,
                print3,
                right_img,
                right_active_img,
            } = this.spriteData2;
            const createAnimation = async () => {
                //右侧元素
                right_active.attr({
                    anchor: [0.5, 0.5],
                    size: [52, 52],
                    bgcolor: "#eee",
                    border: [0, "#F6B2CD"],
                    borderRadius: 4,
                    pos: [394, 220],
                    opacity: 0,
                });
                right_active_img.attr({
                    texture: "https://img.podpartner.com/static/images-20230202/how-work-2-right1.png",
                    anchor: [0.5, 0.5],
                    size: [40, 40],
                });
                // 一格 68px
                right_img.attr({
                    anchor: [0.5, 0.5],
                    pos: [394, -502], //初始
                });

                //左侧元素
                modelBox.attr({
                    anchor: [0.5, 0.5],
                    pos: [220, 248],
                    size: [228, 382],
                });
                base_img.attr({
                    anchor: [0.5, 0.5],
                    pos: [0, 0],
                    size: [228, 382],
                });
                print1.attr({
                    anchor: [1, 1],
                    pos: [66, -28],
                    opacity: 0,
                });
                print2.attr({
                    anchor: [1, 1],
                    pos: [-12, 180],
                    opacity: 0,
                });
                print3.attr({
                    anchor: [0.5, 0.5],
                    pos: [0, 30],
                    opacity: 0,
                });
                // pos: [394, 492], //3
                // pos: [394, 288], //2
                // pos: [394, 84], //1
                await right_img.transition(1).attr({
                    pos: [394, 64],
                });
                await right_img.transition(0.6).attr({
                    pos: [394, 84], //1
                });
                //点击动画
                await right_active.transition(0.4).attr({
                    opacity: 1,
                });
                await right_active.transition(0.1).attr({
                    bgcolor: "#eee",
                });
                await right_active.transition(0.5).attr({
                    bgcolor: "#fff",
                    scale: [1.12, 1.12],
                    border: [2, "#F6B2CD"],
                });
                await print1.transition(0.3).attr({
                    opacity: 1,
                });
                await print1.transition(1).attr({});
                await right_active.transition(0.5).attr({
                    bgcolor: "#fff",
                    scale: [1, 1],
                    border: [0, "#F6B2CD"],
                });
                await right_active.transition(0.5).attr({
                    opacity: 0,
                });
                //点击动画end

                // await right_img.transition(0.6).attr({
                //     pos: [394, 104],
                // });
                await right_img.transition(0.8).attr({
                    pos: [394, 268],
                });
                print1.transition(0.5).attr({
                    opacity: 0,
                });
                await right_img.transition(0.6).attr({
                    pos: [394, 288], //2
                });
                //点击动画
                right_active_img.attr({
                    texture: "https://img.podpartner.com/static/images-20230202/how-work-2-right2.png",
                });
                await right_active.transition(0.4).attr({
                    opacity: 1,
                });
                await right_active.transition(0.1).attr({
                    bgcolor: "#eee",
                });
                await right_active.transition(0.5).attr({
                    bgcolor: "#fff",
                    scale: [1.12, 1.12],
                    border: [2, "#F6B2CD"],
                });
                await print2.transition(0.3).attr({
                    opacity: 1,
                });
                await print2.transition(1).attr({});
                await right_active.transition(0.5).attr({
                    bgcolor: "#fff",
                    scale: [1, 1],
                    border: [0, "#F6B2CD"],
                });

                await right_active.transition(0.5).attr({
                    opacity: 0,
                });
                //点击动画end
                // await right_img.transition(0.6).attr({
                //     pos: [394, 308],
                // });
                await right_img.transition(0.8).attr({
                    pos: [394, 472],
                });
                print2.transition(0.5).attr({
                    opacity: 0,
                });
                await right_img.transition(0.6).attr({
                    pos: [394, 492], //3
                });
                //点击动画
                right_active_img.attr({
                    texture: "https://img.podpartner.com/static/images-20230202/how-work-2-right3.png",
                });
                await right_active.transition(0.4).attr({
                    opacity: 1,
                });
                await right_active.transition(0.1).attr({
                    bgcolor: "#eee",
                });
                await right_active.transition(0.5).attr({
                    bgcolor: "#fff",
                    scale: [1.12, 1.12],
                    border: [2, "#F6B2CD"],
                });
                await print3.transition(0.3).attr({
                    opacity: 1,
                });
                //点击动画end
            }
            createAnimation();
        },
        createSprite1 () {
            const container = document.getElementById("animation-1");
            const scene = new Scene({ container, width: 440, height: 440 });
            const layer = scene.layer();
            const tab = new Group();
            const mouse = new Sprite({
                texture: "https://img.podpartner.com/static/images-20230202/mouse.png",
                opacity: 0,
            });
            layer.append(tab, mouse);
            const clothe1 = new Sprite();
            const bgBox = new Sprite();
            const btnBg = new Sprite();
            const btnBgHover = new Sprite();
            const btnG = new Sprite();
            const btnGHover = new Sprite({
                texture: "https://img.podpartner.com/static/images-20230202/how-work-dui-active.png",
            });
            tab.append(bgBox, clothe1, btnBg, btnBgHover, btnG, btnGHover);
            this.spriteData1 = {
                container,
                scene,
                layer,
                tab,
                mouse,
                clothe1,
                bgBox,
                btnBg,
                btnBgHover,
                btnG,
                btnGHover,
            };
        },
        createSprite2 () {
            const container = document.getElementById("animation-2");
            const scene = new Scene({ container, width: 440, height: 440 });
            const layer = scene.layer();
            layer.attr({
                bgcolor: "#E6EFF4",
            });
            const right_active = new Group();
            const modelBox = new Group();
            const base_img = new Sprite({
                texture: "https://img.podpartner.com/static/images-20230202/how-work-2-base.png",
            });
            const print1 = new Sprite({
                texture: "https://img.podpartner.com/static/images-20230202/how-work-2-print1.png",
            });
            const print2 = new Sprite({
                texture: "https://img.podpartner.com/static/images-20230202/how-work-2-print2.png",
            });
            const print3 = new Sprite({
                texture: "https://img.podpartner.com/static/images-20230202/how-work-2-print3.png",
            });
            const right_img = new Sprite({
                texture: "https://img.podpartner.com/static/images-20230202/how-work-2-right.png",
                size: [52, 1004],
            });
            layer.append(modelBox, right_img, right_active);
            const right_active_img = new Sprite();

            modelBox.append(base_img, print1, print2, print3);
            right_active.append(right_active_img);
            //右侧元素
            right_active.attr({
                anchor: [0.5, 0.5],
                size: [52, 52],
                bgcolor: "#eee",
                border: [0, "#F6B2CD"],
                borderRadius: 4,
                pos: [394, 220],
                opacity: 0,
            });
            right_active_img.attr({
                texture: "https://img.podpartner.com/static/images-20230202/how-work-2-right1.png",
                anchor: [0.5, 0.5],
                size: [40, 40],
            });
            // 一格 68px
            right_img.attr({
                anchor: [0.5, 0.5],
                pos: [394, -502], //初始
            });

            //左侧元素
            modelBox.attr({
                anchor: [0.5, 0.5],
                pos: [220, 248],
                size: [228, 382],
            });
            base_img.attr({
                anchor: [0.5, 0.5],
                pos: [0, 0],
                size: [228, 382],
            });
            print1.attr({
                anchor: [1, 1],
                pos: [66, -28],
                opacity: 0,
            });
            print2.attr({
                anchor: [1, 1],
                pos: [-12, 180],
                opacity: 0,
            });
            print3.attr({
                anchor: [0.5, 0.5],
                pos: [0, 30],
                opacity: 0,
            });
            this.spriteData2 = {
                container,
                scene,
                layer,
                right_active,
                modelBox,
                base_img,
                print1,
                print2,
                print3,
                right_img,
                right_active_img,
            };

        },
        changeScreenSize () {
            let height = document.documentElement.clientHeight;
            let width = document.documentElement.clientWidth;
            this.screenHeight = height;
            if (height >= 740 && width >= 960) {
                this.onScroll()
                this.un_animation = false;
            } else {
                this.un_animation = true;
            }
        },
    },
    created () {
        if (process.client) {
            window.addEventListener("scroll", this.onScroll);
            window.onresize = () => {
                return (() => {
                    this.changeScreenSize()
                })()
            };
        }
    },
    mounted () {
        this.createSprite1();
        this.createSprite2();
        this.changeScreenSize();
    },
    beforeDestroy () {
        window.removeEventListener("scroll", this.onScroll);
    },
};
</script>

<style lang="scss" scoped>
figure > img {
    width: 100%;
    height: 100%;
}
@keyframes show-item {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes hid-item {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
#animation-2 {
    background: #e6eff4;
}
#animation-3 {
    background: #f0f0f0;
    @keyframes mouse {
        0% {
            //选中位置
            top: 362px;
            left: 324px;
        }
        100% {
            top: 248px;
            left: 314px;
        }
    }
    > figure {
        // mouse
        z-index: 5;
        width: 28px;
        height: 29px;

        position: absolute;
        // 初始位置
        top: 362px;
        left: 324px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    > .how-work-tab-media-computer {
        position: relative;
        box-sizing: border-box;
        background: #fff;
        width: 320px;
        height: 267px;
        background-image: url('https://img.podpartner.com/static/images-20230202/how-work-3-bg.png');
        background-repeat: no-repeat;
        > cite {
            position: absolute;
            left: 12px;
            top: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 296px;
            height: 168px;
            background: #fff;
            &:nth-child(1) {
                z-index: 3;
                > dl {
                    z-index: 1;
                    position: absolute;
                    transform: translate(-50%, -50%);
                    top: 38px;
                    left: 50%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    > dt {
                        @keyframes progress-mid {
                            0% {
                                width: 0;
                            }
                            100% {
                                width: calc(50% - 2px);
                            }
                        }
                        @keyframes progress-end {
                            0% {
                                width: calc(50% - 2px);
                            }
                            100% {
                                width: calc(100% - 2px);
                            }
                        }
                        z-index: -1;
                        font-size: 0;
                        position: absolute;
                        transform: translate(-50%, -50%);
                        top: 50%;
                        left: 50%;
                        width: calc(100% - 2px);
                        height: 4px;
                        &::before {
                            content: '';
                            display: block;
                            position: absolute;
                            transform: translate(-50%, -50%);
                            top: 50%;
                            left: 50%;
                            width: calc(100% - 2px);
                            height: 4px;
                            background: #ebebeb;
                        }
                        &::after {
                            content: '';
                            display: block;
                            position: absolute;
                            transform: translateY(-50%);
                            top: 50%;
                            left: 0;
                            width: 1px;
                            height: 4px;
                            background: #ea4c89;
                            // step4-3,step4-5
                        }
                    }
                    > dd {
                        @keyframes dd-show {
                            0% {
                                background: #ebebeb;
                                color: transparent;
                            }
                            100% {
                                background: #ea4c89;
                                color: #fff;
                            }
                        }
                        width: 16px;
                        height: 16px;
                        background: #ebebeb;
                        color: transparent;
                        border-radius: 50%;
                        text-align: center;
                        margin-right: 60px;
                        > i {
                            font-size: 12px;
                            line-height: 16px;
                        }
                        &[sort='1'] {
                            background: #ea4c89;
                            color: #fff;
                        }
                        &[sort='3'] {
                            margin-right: 0;
                        }
                    }
                }

                @keyframes button-show {
                    0% {
                        width: 27px;
                        height: 27px;
                        opacity: 1;
                    }
                    100% {
                        width: 149px;
                        height: 149px;
                        opacity: 0;
                    }
                }
                strong {
                    //step4-2
                    position: absolute;
                    transform: translate(-50%, -50%);
                    left: 253px;
                    top: 151px;
                    display: block;
                    opacity: 0;
                    width: 27px;
                    height: 27px;
                    background: #fbbc06;
                    border-radius: 50%;
                }
            }
            &:nth-child(2) {
                //5s
                figure {
                    opacity: 0;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    img {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        &:nth-child(1) {
                            @keyframes cite2-img1 {
                                0% {
                                    opacity: 1;
                                    left: 12px;
                                    transform: translateY(-50%) scale(1);
                                }
                                60% {
                                    opacity: 1;
                                    left: 188px;
                                    transform: translateY(-50%) scale(0.5);
                                }
                                100% {
                                    opacity: 0;
                                    left: 188px;
                                    transform: translateY(-50%) scale(0.5);
                                }
                            }
                            z-index: 1;
                            opacity: 1;
                            left: 12px; //188
                            width: 56px;
                            height: 54px;
                            transform: translateY(-50%) scale(1);
                        }
                        &:nth-child(2) {
                            width: 158px;
                            height: 168px;
                            @keyframes cite2-right-join {
                                0% {
                                    left: 100%;
                                }
                                100% {
                                    left: 138px;
                                }
                            }
                            left: 100%;
                        }
                        &:nth-child(3) {
                            @keyframes cite2-img3 {
                                0% {
                                    top: 100%;
                                }
                                100% {
                                    top: 0;
                                }
                            }
                            top: 100%;
                            transform: translateY(0);
                        }
                    }
                }
            }
        }
    }

    &.active {
        > figure {
            animation-name: mouse, hid-item;
            animation-duration: 1s, 0.5s;
            animation-timing-function: ease-in-out, ease-in-out;
            animation-delay: 0s, 2s;
            animation-fill-mode: forwards, forwards;
        }
        > .how-work-tab-media-computer {
            > cite {
                &:nth-child(1) {
                    animation: hid-item 0.5s ease-in-out 4.5s forwards;
                    > dl {
                        > dt {
                            &::after {
                                // step4-3,step4-5
                                animation-name: progress-mid, progress-end;
                                animation-duration: 0.5s, 0.5s;
                                animation-timing-function: ease-in-out,
                                    ease-in-out;
                                animation-delay: 2s, 3s;
                                animation-fill-mode: forwards, forwards;
                            }
                        }
                        > dd {
                            &[sort='2'] {
                                //step4-4 3s
                                animation: dd-show 0.5s ease-in-out 2.5s
                                    forwards;
                            }
                            &[sort='3'] {
                                //step4-6 4s
                                animation: dd-show 0.5s ease-in-out 3.5s
                                    forwards;
                            }
                        }
                    }
                    strong {
                        //step4-2
                        animation: button-show 1s ease-in-out 1s forwards;
                    }
                }
                &:nth-child(2) {
                    //5s
                    figure {
                        animation: show-item 0.5s linear 5.5s forwards; //1
                        img {
                            &:nth-child(1) {
                                animation: cite2-img1 1.5s ease-in-out 7.5s
                                    forwards; //3
                            }
                            &:nth-child(2) {
                                animation: cite2-right-join 1s ease-in-out 6s
                                    forwards; //2
                            }
                            &:nth-child(3) {
                                animation: cite2-img3 1s ease-in-out 9.5s
                                    forwards; //4
                            }
                        }
                    }
                }
            }
        }
    }
}
#animation-4 {
    // 动画
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
    > figure {
        position: absolute;
        &:nth-child(1) {
            z-index: 1;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            img {
                position: absolute;
                &:nth-child(1) {
                    width: 240px;
                    height: 198px;
                }
                &:nth-child(2) {
                    // mouse
                    top: 140px;
                    left: 54px;
                    width: 32px;
                    height: 32px;
                    z-index: 2;
                }
            }
            &::after {
                opacity: 0;
                content: '';
                display: block;
                position: absolute;
                transform: translate(-50%, -50%);
                z-index: 1;
                left: 22px;
                top: 62px;
                display: block;
                width: 27px;
                height: 27px;
                font-size: 0;
                background: #23b98f;
                border-radius: 50%;
            }
        }
        &:nth-child(2) {
            opacity: 1;
            top: 16px;
            left: 16px;
            width: 408px;
            height: 44px;
            z-index: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            img {
                opacity: 0;
                width: 80px;
                height: 14px;
                margin-left: 16px;
            }
            &::before {
                opacity: 0;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                display: block;
                width: 100%;
                height: 100%;
                background: #fff;
                border-radius: 8px;
            }
            &::after {
                opacity: 0;
                content: '';
                position: absolute;
                top: 50%;
                right: 14px;
                transform: translateY(-50%);
                z-index: 0;
                display: block;
                width: 84px;
                height: 22px;
                background: #ebebeb;
                border-radius: 4px;
            }
        }
        &:nth-child(3) {
            opacity: 0;
            z-index: 2;
            // 1
            width: 748px;
            height: 748px;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
        }
    }
    dl {
        position: absolute;
        top: 70px;
        width: 408px;
        height: 349px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        //背景
        &::before {
            opacity: 0;
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            display: block;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 8px;
        }
        dt {
            display: none;
        }
        dd {
            position: relative;
            margin-top: 32px;
            width: 338px;
            display: flex;
            flex-direction: row;
            align-items: center;
            figure {
                opacity: 0;
                width: 32px;
                height: 32px;
            }
            cite {
                opacity: 0;
                margin-left: 14px;
                font-size: 0;
                height: 30px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                &::before {
                    content: '';
                    display: block;
                    width: 227px;
                    height: 12px;
                    background: #ebebeb;
                    border-radius: 2px;
                }
                &::after {
                    content: '';
                    display: block;
                    width: 107px;
                    height: 12px;
                    background: #ebebeb;
                    border-radius: 2px;
                }
            }
            i {
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
                opacity: 0;
                color: #23b98f;
                font-size: 32px;
                line-height: 32px;
            }
        }
    }
    &.active {
        @keyframes section4-mouser-move {
            0% {
                top: 140px;
                left: 54px;
            }
            100% {
                top: 60px;
                left: 12px;
            }
        }
        @keyframes section4-3-zoom1 {
            0% {
                width: 748px;
                height: 748px;
            }
            100% {
                width: 160px;
                height: 160px;
            }
        }
        @keyframes section4-3-zoom2 {
            0% {
                width: 160px;
                height: 160px;
                top: 50%;
                left: 50%;
            }
            100% {
                width: 32px;
                height: 32px;
                top: 118px;
                left: 67px;
            }
        }
        > figure {
            &:nth-child(1) {
                img:nth-child(2) {
                    animation: section4-mouser-move 0.5s ease forwards; // start
                }
                &::after {
                    animation: button-show 1s ease-in-out 0.5s forwards; // section4-1
                }
                animation: hid-item 0.5s ease 1.5s forwards; // section4-2
            }
            &:nth-child(2) {
                img {
                    animation: show-item 0.5s ease 3s forwards; // section4-5
                }
                &::after,
                &::before {
                    animation: show-item 1s ease 3.5s forwards; // section4-6
                }
            }
            &:nth-child(3) {
                animation-name: show-item, section4-3-zoom1, section4-3-zoom2; // section4-3 section4-4 section4-7
                animation-duration: 1s, 0.5s, 0.5s;
                animation-timing-function: ease;
                animation-delay: 2s, 3s, 4.5s;
                animation-fill-mode: forwards;
            }
        }
        dl {
            &::before {
                animation: show-item 1s ease 3.5s forwards; // section4-6
            }
            dd {
                // section4-8
                &:nth-child(2) {
                    cite {
                        animation: show-item 0.5s ease 5.5s forwards;
                    }
                }
                &:nth-child(3),
                &:nth-child(4),
                &:nth-child(5),
                &:nth-child(6) {
                    figure,
                    cite {
                        animation: show-item 0.8s ease 6s forwards; // 6.8s
                    }
                }
                // 停顿0.3s  6.8+0.3=7.1s
                &:nth-child(2) {
                    i {
                        animation: show-item 0.5s ease 6.8s forwards;
                    }
                }
                &:nth-child(3) {
                    i {
                        animation: show-item 0.5s ease 7s forwards;
                    }
                }
                &:nth-child(4) {
                    i {
                        animation: show-item 0.5s ease 7.2s forwards;
                    }
                }
                &:nth-child(5) {
                    i {
                        animation: show-item 0.5s ease 7.3s forwards;
                    }
                }
                &:nth-child(6) {
                    i {
                        animation: show-item 0.5s ease 7.5s forwards;
                    }
                }

                // &:nth-child(2) {
                //     cite {
                //         animation: show-item 0.5s ease 5.5s forwards;
                //     }
                //     i {
                //         animation: show-item 0.5s ease 6s forwards;
                //     }
                // }
                // &:nth-child(3) {
                //     figure,
                //     cite {
                //         animation: show-item 0.5s ease 6.5s forwards;
                //     }

                //     i {
                //         animation: show-item 0.5s ease 7s forwards;
                //     }
                // }
                // &:nth-child(4) {
                //     figure,
                //     cite {
                //         animation: show-item 0.5s ease 7.5s forwards;
                //     }

                //     i {
                //         animation: show-item 0.5s ease 8s forwards;
                //     }
                // }
                // &:nth-child(5) {
                //     figure,
                //     cite {
                //         animation: show-item 0.5s ease 8.5s forwards;
                //     }

                //     i {
                //         animation: show-item 0.5s ease 9s forwards;
                //     }
                // }
                // &:nth-child(6) {
                //     figure,
                //     cite {
                //         animation: show-item 0.5s ease 9.5s forwards;
                //     }

                //     i {
                //         animation: show-item 0.5s ease 10s forwards;
                //     }
                // }
            }
        }
    }
}
#animation-5 {
    background: #dfe8f4;
    position: relative;
    overflow: hidden;
    @keyframes section5-cite1-mid {
        0% {
            top: 96px;
            left: -86px;
        }
        100% {
            top: 96px;
            left: 50%;
        }
    }
    @keyframes section5-cite1-bottom1 {
        0% {
            top: 96px;
            left: 50%;
        }
        100% {
            top: 316px;
            left: 108px;
        }
    }
    @keyframes section5-cite1-bottom2 {
        0% {
            top: 96px;
            left: 50%;
        }
        100% {
            top: 316px;
            left: 50%;
        }
    }
    @keyframes section5-cite1-bottom3 {
        0% {
            top: 96px;
            left: 50%;
        }
        100% {
            top: 316px;
            left: 332px;
        }
    }
    @keyframes section5-img-width {
        0% {
            width: 172px;
        }
        100% {
            width: 72px;
        }
    }
    @keyframes section5-cloud {
        0% {
            left: -1052px;
        }
        100% {
            left: 400px;
        }
    }
    @keyframes section5-aircraft {
        0% {
            left: 530px;
        }
        100% {
            left: 50%;
        }
    }
    cite {
        position: absolute;
        top: 96px;
        left: -86px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            width: 172px;
        }
        > i {
            opacity: 0;
            display: inline-block;
            width: 24px;
            height: 24px;
            font-size: 18px;
            background: #ffffff;
            border-radius: 50%;
            color: #23b98f;
            text-align: center;
            line-height: 24px;
        }
    }
    > figure {
        opacity: 0;
        position: absolute;
        top: 76px;
        width: 336px;
        height: 162px;
        &::before {
            content: '';
            position: absolute;
            left: -1052px;
            display: block;
            width: 1000px;
            height: 174px;
            background-image: url('https://img.podpartner.com/static/images-20230202/how-work-cloud.png');
        }
        img {
            position: absolute;
            top: 50%;
            left: 530px;
            transform: translate(-50%, -50%);
        }
    }
    &.active {
        cite {
            &:nth-child(1) {
                // 0s
                animation-name: section5-cite1-mid, section5-cite1-bottom1;
                animation-duration: 1s, 0.5s;
                animation-timing-function: ease-in-out, ease-in-out;
                animation-delay: 0s, 1.5s;
                animation-fill-mode: forwards, forwards;
                > i {
                    animation: show-item 0.1s linear 1s forwards; //1.3s
                }
                img {
                    animation: section5-img-width 0.5s linear 1s forwards;
                }
                //end 2s
            }
            &:nth-child(2) {
                animation-name: section5-cite1-mid, section5-cite1-bottom2;
                animation-duration: 1s, 0.5s;
                animation-timing-function: ease-in-out, ease-in-out;
                animation-delay: 2s, 3.5s;
                animation-fill-mode: forwards, forwards;
                > i {
                    animation: show-item 0.1s linear 3s forwards; //1.3s
                }
                img {
                    animation: section5-img-width 0.5s linear 3s forwards;
                }
                //end 4s
            }
            &:nth-child(3) {
                animation-name: section5-cite1-mid, section5-cite1-bottom3;
                animation-duration: 1s, 0.5s;
                animation-timing-function: ease-in-out, ease-in-out;
                animation-delay: 4s, 5.5s;
                animation-fill-mode: forwards, forwards;
                > i {
                    animation: show-item 0.1s linear 5s forwards; //1.3s
                }
                img {
                    animation: section5-img-width 0.5s linear 5s forwards;
                }
                //end 6s
            }
        }
        > figure {
            animation: show-item 0.5s linear 6s forwards;
            &::before {
                animation: section5-cloud 8s linear infinite;
            }
            img {
                animation: section5-aircraft 2s ease-in-out 6s forwards;
            }
        }
    }
}

.how-work {
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    .how-work-banner {
        width: 100%;
        padding: 108px 0;
        background-color: rgb(246, 246, 246);
        text-align: center;
        background-image: url('https://img.podpartner.com/static/images-20230202/how-work-banner.png');
        background-size: 1004px 220px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        > h2 {
            height: 52px;
            font-size: 72px;
            font-weight: bold;
            color: #000;
            line-height: 52px;
            margin-bottom: 26px;
        }
        > p {
            height: 26px;
            font-size: 24px;
            color: #000;
            line-height: 26px;
        }
    }
    .how-work-tab {
        padding: 0 14px;
        box-sizing: border-box;
        width: 100%;
        max-width: 1100px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto 200px;
        background: #ffffff;
        height: 440px;
        .how-work-tab-media {
            position: relative;
            order: 0;
            width: 440px;
            height: 100%;
            background: #f6f6f6;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
        }

        > article {
            flex: 1;
            width: 564px;
            order: 1;
            margin: 0 26px;
            > h3 {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 21px;
                > strong {
                    text-align: center;
                    margin-right: 12px;
                    font-size: 18px;
                    color: #ffffff;
                    line-height: 24px;
                    width: 24px;
                    height: 24px;
                    background: #000000;
                    border-radius: 50%;
                }
                > span {
                    vertical-align: bottom;
                    font-size: 28px;
                    font-weight: bold;
                    color: #000000;
                    line-height: 24px;
                    height: 21px;
                }
            }
            > p {
                font-size: 18px;
                color: #555;
                line-height: 32px;
                margin-bottom: 38px;
                a {
                    color: #555555;
                    font-family: Roboto-Medium;
                    font-weight: normal;
                    position: relative;
                    &::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        bottom: -3px;
                        display: inline-block;
                        width: 100%;
                        height: 1px;
                        background: #555555;
                    }
                    &:hover {
                        color: #ea4c89;
                        &::after {
                            background: #ea4c89;
                        }
                    }
                }
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
        &:nth-child(2n - 1) {
            .how-work-tab-media {
                order: 2;
            }
        }
    }
    // &.active {
    //     &::before {
    //         content: "";
    //         z-index: 10;
    //         display: inline-block;
    //         width: 100%;
    //         height: 150px;
    //         background: linear-gradient(
    //             rgba(255, 255, 255, 0),
    //             rgba(255, 255, 255, 1)
    //         );
    //         // background: blue;
    //         position: fixed;
    //         bottom: 0;
    //     }
    //     &::after {
    //         content: "";
    //         z-index: 10;
    //         display: inline-block;
    //         width: 100%;
    //         height: 150px;
    //         background: linear-gradient(
    //             rgba(255, 255, 255, 1),
    //             rgba(255, 255, 255, 0)
    //         );
    //         // background: blue;
    //         position: fixed;
    //         top: 198px;
    //     }
    // }
}

.how-work-title {
    z-index: 1;
    // position: relative;
    // top: 78px;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: calc(100vh - 398px);
    min-height: 200px;
    justify-content: center;
    line-height: 100vh;
    width: 100%;
    font-size: 28px;
    font-weight: bold;
    background: #fff;
    color: #000000;
    // margin: 120px 0;
    line-height: 120px;
    text-align: center;
    > strong {
        position: relative;
        &::before {
            content: '';
            display: inline-block;
            width: 72px;
            height: 72px;
            background: #fbbc06;
            opacity: 0.5;
            border-radius: 72px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }
    }
    // &::before {
    //     content: "";
    //     display: block;
    //     position: fixed;
    //     top: 50%;
    //     left: 50%;
    //     transform: translate(-50%, -50%);
    //     height: 1px;
    //     width: 300px;
    //     background: red;
    // }
}

.how-work-next {
    width: 100%;
    height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
    color: #000;
    background-color: #f6f6f6;
    background-image: url('https://img.podpartner.com/static/images-20230202/how-work-next.png');
    background-size: auto 520px;
    background-position: center;
    background-repeat: no-repeat;
    h2 {
        height: 32px;
        font-size: 36px;
        font-weight: bold;
        color: #000000;
        line-height: 32px;
        margin-bottom: 40px;
    }
    cite {
        width: 546px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 26px;
        p {
            box-sizing: border-box;
            padding-left: 28px;
            display: inline-block;
            width: 250px;
            height: 26px;
            font-size: 22px;
            color: #000000;
            line-height: 26px;
            text-align: left;
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 6px;
                height: 6px;
                border-radius: 6px;
                background: #edb002;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }
        }
    }

    button {
        width: 260px;
        height: 48px;
        background: #ea4c89;
        border-radius: 6px;
        margin: 22px auto;
        font-size: 24px;
        color: #ffffff;
        &:hover {
            background: #c94175;
        }
    }
}
.un-animation {
    .how-work-tab {
        opacity: 1 !important;
        transform: none !important;
    }
}
@media (max-width: 960px) {
    .how-work {
        .how-work-banner {
            padding: 0 150px 0 0;
            height: 120px;
            background-image: none;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: left;
            h2 {
                width: 152px;
                font-size: 20px;
                font-weight: bold;
                color: #000000;
                line-height: 24px;
                height: 24px;
                margin: 0 0 4px;
                position: relative;
                &::before {
                    content: '';
                    display: block;
                    width: 180px;
                    height: 120px;
                    position: absolute;
                    left: 100%;
                    top: -34px;
                    background-image: url('https://img.podpartner.com/static/images-20230202/how-work-banner-static.png');
                    background-size: 180px 120px;
                }
            }
            p {
                width: 152px;
                font-size: 12px;
                font-weight: 400;
                color: #000000;
                line-height: 14px;
            }
        }
        .how-work-title {
            width: calc(100% - 60px);
            display: inline-block;
            margin: 28px 0 24px;
            height: auto;
            min-height: auto;
            font-size: 16px;
            font-weight: bold;
            color: #000000;
            line-height: 20px;
            > strong::before {
                height: 24px;
                width: 24px;
                transform: translate(-56%, -56%);
            }
        }
        .how-work-tab {
            flex-direction: column;
            height: auto;
            max-width: 500px;
            margin-bottom: 24px;
            &::before {
                content: '';
                display: block;
                border-radius: 20px;
                width: 100%;
                padding-bottom: 100%;
                overflow: hidden;
                background-image: url('https://img.podpartner.com/static/images-20230202/how-work-static-1.jpg');
                background-size: 100% auto;
                background-repeat: no-repeat;
            }
            .how-work-tab-media {
                display: none;
            }
            article {
                margin: 20px 0 0;
                width: 100%;
                h3 {
                    margin-bottom: 12px;
                    & > strong {
                        margin-right: 6px;
                        font-size: 14px;
                        line-height: 18px;
                        width: 18px;
                        height: 18px;
                    }
                    span {
                        font-size: 18px;
                        font-weight: bold;
                        color: #000000;
                    }
                }
                p {
                    font-size: 16px;
                    line-height: 28px;
                }
            }
            &:nth-child(4)::before {
                background-image: url('https://img.podpartner.com/static/images-20230202/how-work-static-2.jpg');
            }
            &:nth-child(5)::before {
                background-image: url('https://img.podpartner.com/static/images-20230202/how-work-static-3.jpg');
            }
            &:nth-child(6)::before {
                background-image: url('https://img.podpartner.com/static/images-20230202/how-work-static-4.jpg');
            }
            &:nth-child(7)::before {
                background-image: url('https://img.podpartner.com/static/images-20230202/how-work-static-5.jpg');
            }
        }
        .how-work-next {
            padding: 48px 0;
            height: auto;
            h2 {
                font-size: 20px;
                font-weight: bold;
                color: #000000;
                line-height: 28px;
                height: auto;
            }
            cite {
                width: calc(100% - 40px);
                flex-wrap: wrap;
                justify-content: center;
                margin-bottom: 0;
                p {
                    margin: 0 10px;
                    width: 180px;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 22px;
                    margin-bottom: 8px;
                    padding-left: 22px;
                }
            }
            button {
                width: 100%;
                max-width: 332px;
                height: 52px;
                margin: 28px 0 0;
                font-size: 18px;
                font-weight: bold;
                color: #ffffff;
                line-height: 20px;
            }
        }
    }
}
</style>
